<template>
  <div class='page'>
    <div class='container'>
      <pub-search
        v-model:searchColumns='state.searchColumns'
        v-model:searchForm='state.searchForm'
        mask-append-to='table-container'
        @search='getPageData'
      >
        <template #leftBtn>
          <el-button
            :icon='Plus'
            class='btn-table-add'
            type='primary'
            @click="addNode('')"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class='node-container'>
        <pub-table
          ref='pubTable'
          :column='state.columns'
          :data='state.tableData'
          :loading='tableLoading'
        >
          <template #custom-nodeName='scope'>
            <el-input
              v-if='scope.row.isEdit == 1'
              v-model='scope.row.nodeName'
              placeholder='请输入'
            ></el-input>
            <span v-else>{{ scope.row.nodeName }}</span>
          </template>
          <template #custom-sort='scope'>
            <el-input
              v-if='scope.row.isEdit == 1'
              v-model='scope.row.sort'
              placeholder='请输入'
            ></el-input>
            <span v-else>{{ scope.row.sort }}</span>
          </template>
          <template #custom-viewType='scope'>
            <pub-dict-select
              v-if='scope.row.isEdit == 1'
              v-model='scope.row.viewType'
              dict-code='XSLX'
              placeholder='请选择'
            />
            <span v-else>{{ formatDictCode('XSLX', scope.row.viewType) }}</span>
          </template>
          <template #option='scope'>
            <el-button
              v-if='!scope.row.isEdit'
              class='btn-row-add'
              plain
              type='primary'
              @click='editNode(scope.row)'
            >
              修改
            </el-button>
            <el-button
              v-if='scope.row.isEdit'
              class='btn-row-add'
              plain
              type='primary'
              @click='saveNode(scope.row)'
            >
              保存
            </el-button>
            <el-button
              v-if='scope.row.id'
              class='btn-row-add'
              plain
              type='primary'
              @click='delNode(scope.row)'
            >
              删除
            </el-button>
          </template>
        </pub-table>
      </div>
      <pub-pagination
        :total='total'
        v-model:page='state.searchForm.pageNum'
        v-model:limit='state.searchForm.pageSize'
        @pagination='getPageData'
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import { Sm4Dncrypt } from '@/utils/encryption.js'
import { getNodeList, insertNode, updateNode, deleteNode } from '@/api/process'
import { formatDictCode } from '../../../../utils/format'

const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo

const isEdit = ref(false)
const dialogFormVisible_add = ref(false)
const popTitle = ref('')
const tableLoading = ref(false)
const total = ref(0)
const state = reactive({
  tableData: [],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  editId: null,
  columns: [
    { label: '节点名称', prop: 'nodeName', type: 'custom-mul' },
    { label: '排序', prop: 'sort', type: 'custom-mul' },
    { label: '显示类型', prop: 'viewType', type: 'custom-mul' },
    { label: '操作', type: 'option', width: 140, fixed: 'right' }
  ]
})
const props = defineProps({
  processId: String
})
const addNode = () => {
  if (state.tableData.some(v => v.isEdit)) {
    return
  }
  state.tableData.push({
    isEdit: true,
    name: '',
    sort: '',
    processId: props.processId,
    viewType: ''
  })
}
const editNode = (row) => {
  if (state.tableData.some(v => v.isEdit)) {
    return
  }
  row.isEdit = true
}
const saveNode = async (row) => {
  let res;
  if (row.id) {
    res = await updateNode(row)
  } else {
    res = await insertNode(row)
  }
  if (res.succeed) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    getPageData();
  }
}

const delNode = async(row) =>{
  let res = await deleteNode(row.id)
  if(res.succeed){
    ElMessage({
      type: 'success',
      message: res.msg
    })
    getPageData();
  }
}

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getNodeList({
    ...state.searchForm,
    processId: props.processId
  })
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

onMounted(() => {
  getPageData()
})
</script>
<style scoped>
.node-container {
    height: calc(100% - 90px);
    flex: 1;
}
</style>
